@extends('admin.common.main')

@section('css')
    {{-- webuploader上传样式 --}}

@endsection

@section('cnt')
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">主页</a>
                </li>
                <li>
                    <a href="{{route("admin.fangowners.index")}}">房东列表</a>
                </li>
                <li>
                    <strong>新增房东</strong>
                </li>
            </ol>
        </div>
    </div>
    <article class="page-container">
        {{-- 表单验证提示 --}}
        @include('admin.common.validate')

        <form action="{{ route('admin.fangowners.store') }}"  enctype="multipart/form-data"  method="post" class="form form-horizontal" id="form-member-add">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="name" value="{{ old('name') }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="age">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="phone">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="email">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="card">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>地址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="address">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="sex" type="radio" value="男" checked>
                        <label for="sex-1">男</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" value="女" name="sex">
                        <label for="sex-2">女</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片(正面)：</label>
                <div class="formControls col-xs-6 col-sm-7">
                    <!-- 表单提交时，上传图片地址，以#隔开 -->
                    <input type="file" name="pic[]" id="pic1"/>
                    <!-- 显示上传成功后的图片容器 -->
                    <img id="imglist1" height="100px" width="100px" class="img-rounded"/>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片(反面)：</label>
                <div class="formControls col-xs-6 col-sm-7">
                    <!-- 表单提交时，上传图片地址，以#隔开 -->
                    <input type="file" name="pic[]" id="pic2"/>
                    <!-- 显示上传成功后的图片容器 -->
                    <img id="imglist2" height="100px" width="100px"  class="img-rounded"/>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片(手持)：</label>
                <div class="formControls col-xs-6 col-sm-7">
                    <input type="file" name="pic[]" id="pic3"/>
                    <img id="imglist3" height="100px" width="100px"  class="img-rounded"/>
                </div>
            </div>


            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加房东">
                </div>
            </div>
        </form>
    </article>
@endsection

@section('js')
    <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>

    <script>

        $("#pic1").on('change', function () {
            preImg('pic1','imglist1');
        });
        $("#pic2").on('change', function () {
            preImg('pic2','imglist2');
        });
        $("#pic3").on('change', function () {
            preImg('pic3','imglist3');
        });
        function preImg(sourceId, targetId) {
            if (navigator.userAgent.indexOf("MSIE") >= 1) {
                url = document.getElementById(sourceId).value;
            } else if (navigator.userAgent.indexOf("Firefox") > 0) {
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if (navigator.userAgent.indexOf("Chrome") > 0) {
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }
            document.getElementById(targetId).src = url;
        }

      // 前端表单验证
      $("#form-member-add").validate({
        // 规则
        rules: {
          // 表单元素名称
          name: {
            // 验证规则
            required: true
          },
          card: {
            required: true
          },
          email: {
            required: true,
            email: true
          },
          phone: {
            required: true,
            phone: true
          }
        },
        // 取消键盘事件
        onkeyup: false,
        // 验证成功后的样式
        success: "valid",
        // 验证通过后，处理的方法 form dom对象
        submitHandler: function (form) {
          // 表单提交
          form.submit();
        }
      });

      // 自定义验证规则
      // 邮政编码验证
      jQuery.validator.addMethod("phone", function (value, element) {
        // patrn = /^(\+86-)?1[3-9]\d{9}$/;
        var reg1 = /^\+86-1[3-9]\d{9}$/;
        var reg2 = /^1[3-9]\d{9}$/;
        var ret = reg1.test(value) || reg2.test(value);
        return this.optional(element) || ret;
      }, "请输入正确的手机号码");


    </script>

@endsection

